<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Web storage 示例</title>
	</head>
	<body>
		<h1>Web storage 示例</h1>
		<p id="msg"></p>
		<input type="text" id="input" />
		<input type="button" value="保存数据" onclick="saveStorage('input')"/>
		<input type="button" value="读取数据" onclick="loadStorage('msg')" />
		<script>
			// cookie    存放数据 4k左右   跟 服务器端通信 ,设置有效时间, 过了有效时间  数据 消失
			// localStorage 存放数据 5M 至 更大 不跟 服务器端通信 除非数据被清除,否则一直存在
			// sessionStorage 存放数据 5M 至 更大 不跟 服务器端通信 关闭页面 数据 消失
			// 三者都保存在浏览器端,跟服务器端的session机制不同
			// function saveStorage(id){
			// 	var target = document.getElementById(id);
			// 	var str = target.value;
			// 	sessionStorage.setItem('key1',str);
			// }
			// function loadStorage(id){
			// 	var target = document.getElementById(id);
			// 	var str = sessionStorage.getItem('key1');
			// 	target.innerHTML = str ;
			// }
			
			function saveStorage(id){
				var target = document.getElementById(id);
				var str = target.value;
				localStorage.setItem('key1',str);
			}
			function loadStorage(id){
				var target = document.getElementById(id);
				var str = localStorage.getItem('key1');
				target.innerHTML = str ;
			}
		</script>
	</body>
</html>
